<template>
	<view class="page index">
		<!-- 日程 start -->
		<view class="layout schedule">
			<uni-section title="日程" type="line" titleColor="#101010">
				<template v-slot:right>
					<view @click="toSchedule">
						<uni-icons type="plus" size="20" color="#4095E5"></uni-icons>
					</view>
				</template>
			</uni-section>
			<view class="calendar">
				<view class="year-month">
					{{yearMonth}}
				</view>
				<view class="cal-day">
					<view class="weekdays">
						<view v-for="day in weekdays" :key="day">
							{{day}}
						</view>
					</view>
					<view class="dates">
						<view v-for="(date, index) in currentWeekDates" :key="index" :class="{'current-day': isToday(date)}">
							<view class="current">
								{{date.day}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="schedule-list">
				<view class="item" @click="toDetails(0)">
					<view class="tag task">
						任务
					</view>
					<view class="note">
						xxxxxxxxxx任务
					</view>
				</view>
				<view class="item" @click="toDetails(1)">
					<view class="tag">
						备忘
					</view>
					<view class="note">
						xxxxxxxxxxxx备忘事项
					</view>
				</view>
			</view>
			<view class="more">
				<image src="@/static/images/more.png" mode="aspectFill"></image>
			</view>
		</view>
		<!-- 日程 end -->
		<!-- 常用功能 start -->
		<view class="layout function">
			<uni-section title="常用功能" type="line" titleColor="#101010">
			</uni-section>
			<view class="fun-container">
				<view class="fun-item">
					<navigator url="/pages/index/customer/index" class="fun-tab" hover-class="none">
						<view class="image" style="background-color: #f5dadd;">
							<span class="iconfont icon" style="color: #de868f;">&#xe6ec;</span>
						</view>
						<view class="title">
							客户
						</view>
					</navigator>
				</view>
				<view class="fun-item">
					<navigator url="/pages/index/contact/index" class="fun-tab" hover-class="none">
						<view class="image" style="background-color: #c5dff7;">
							<span class="iconfont icon" style="color: #4095e5;">&#xe632;</span>
						</view>
						<view class="title">
							联系人
						</view>
					</navigator>
				</view>
				<view class="fun-item">
					<navigator url="/pages/index/project/index" class="fun-tab" hover-class="none">
						<view class="image" style="background-color: #ffecd2;">
							<span class="iconfont icon" style="color: #ffbf6b;">&#xe604;</span>
						</view>
						<view class="title">
							项目
						</view>
					</navigator>
				</view>
				<view class="fun-item">
					<navigator url="/pages/index/agreement/index" class="fun-tab" hover-class="none">
						<view class="image" style="background-color: #eadafd;">
							<span class="iconfont icon" style="color: #b886f8;">&#xe6ed;</span>
						</view>
						<view class="title">
							合同
						</view>
					</navigator>
				</view>
				<view class="fun-item">
					<navigator url="/pages/index/paymentCollection/index" class="fun-tab" hover-class="none">
						<view class="image" style="background-color: #feefb2;">
							<span class="iconfont icon" style="color: #ffbf6b;">&#xe620;</span>
						</view>
						<view class="title">
							回款
						</view>
					</navigator>
				</view>
				<!-- <view class="fun-item">
					<navigator url="/pages/index/follow/index" class="fun-tab" hover-class="none">
						<view class="image" style="background-color: #def1fb;">
							<span class="iconfont icon" style="color: #61a8ea;">&#xeb44;</span>
						</view>
						<view class="title">
							跟进
						</view>
					</navigator>
				</view> -->
				<view class="fun-item">
					<navigator url="/pages/index/task/index" class="fun-tab" hover-class="none">
						<view class="image" style="background-color: #ebc1bd;">
							<span class="iconfont icon" style="color: #c24337;">&#xe891;</span>
						</view>
						<view class="title">
							任务
						</view>
					</navigator>
				</view>
				<view class="fun-item">
					<navigator url="/pages/index/approval/index" class="fun-tab" hover-class="none">
						<view class="image" style="background-color: #d9e8c3;">
							<span class="iconfont icon" style="color: #81b337;">&#xe877;</span>
						</view>
						<view class="title">
							审批
						</view>
					</navigator>
				</view>
			</view>
		</view>
		<!-- 常用功能 end -->
		<!-- 待办提醒 start -->
		<view class="layout remind">
			<uni-section title="待办提醒" type="line" titleColor="#101010">
			</uni-section>
			<view class="remind-list">
				<view class="remind-item">
					<view class="remind-num">
						2
					</view>
					<view class="remind-type">
						待完成的任务
					</view>
				</view>
				<view class="remind-item">
					<view class="remind-num">
						2
					</view>
					<view class="remind-type">
						待处理的审批
					</view>
				</view>
				<navigator url="/pages/index/schedule/abnormal" class="remind-item" hover-class="none">
					<view class="remind-num">
						2
					</view>
					<view class="remind-type">
						待处理的异常
					</view>
				</navigator>
			</view>
		</view>
		<!-- 待办提醒 end -->
		<!-- 公共消息 start -->
		<view class="layout message">
			<uni-section title="公告消息" type="line" titleColor="#101010">
				<template v-slot:right>
					<view class="all" @click="toNotice">查看全部</view>
				</template>
			</uni-section>
			<view class="message-list">
				<view class="message-item">
					<view class="line mes"></view>
					<view class="content">
						<view class="time">
							2024-06-18 15:32:23
						</view>
						<view class="topic">
							公告标题公告标题公告标题
						</view>
					</view>
				</view>
				<view class="message-item">
					<view class="line not"></view>
					<view class="content">
						<view class="time">
							2024-06-18 15:32:23
						</view>
						<view class="topic">
							消息提醒消息提醒消息提醒
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 公共消息 end -->
		<!-- <view class="create">
			<view class="contain" @click="openCreate">
				<view class="img">
					<uni-icons type="plus" size="24" color="#ababab"></uni-icons>
				</view>
				<view class="text">
					<text>新建</text>
				</view>
			</view>
		</view> -->
		<!-- 新建弹出框 -->
		<!-- <uni-popup ref="createPopup" type="bottom">
			<view class="create-popup">
				<view class="title">
					新建
				</view>
				<view class="fun-container">
					<view class="fun-item">
						<navigator url="/pages/index/customer/createCustomer" class="fun-tab" hover-class="none">
							<view class="image" style="background-color: #f5dadd;">
								<span class="iconfont icon" style="color: #de868f;">&#xe6ec;</span>
							</view>
							<view class="title">
								客户
							</view>
						</navigator>
					</view>
					<view class="fun-item">
						<navigator url="/pages/index/contact/createContact" class="fun-tab" hover-class="none">
							<view class="image" style="background-color: #c5dff7;">
								<span class="iconfont icon" style="color: #4095e5;">&#xe632;</span>
							</view>
							<view class="title">
								联系人
							</view>
						</navigator>
					</view>
					<view class="fun-item">
						<navigator url="/pages/index/project/createProject" class="fun-tab" hover-class="none">
							<view class="image" style="background-color: #ffecd2;">
								<span class="iconfont icon" style="color: #ffbf6b;">&#xe604;</span>
							</view>
							<view class="title">
								项目
							</view>
						</navigator>
					</view>
					<view class="fun-item">
						<navigator url="/pages/index/agreement/create" class="fun-tab" hover-class="none">
							<view class="image" style="background-color: #eadafd;">
								<span class="iconfont icon" style="color: #b886f8;">&#xe6ed;</span>
							</view>
							<view class="title">
								合同
							</view>
						</navigator>
					</view>
					<view class="fun-item">
						<navigator url="/pages/index/paymentCollection/create" class="fun-tab" hover-class="none">
							<view class="image" style="background-color: #feefb2;">
								<span class="iconfont icon" style="color: #ffbf6b;">&#xe620;</span>
							</view>
							<view class="title">
								回款
							</view>
						</navigator>
					</view>
					<view class="fun-item">
						<navigator url="/pages/index/follow/create" class="fun-tab" hover-class="none">
							<view class="image" style="background-color: #def1fb;">
								<span class="iconfont icon" style="color: #61a8ea;">&#xeb44;</span>
							</view>
							<view class="title">
								跟进
							</view>
						</navigator>
					</view>
					<view class="fun-item">
						<navigator url="/pages/index/task/createTask" class="fun-tab" hover-class="none">
							<view class="image" style="background-color: #ebc1bd;">
								<span class="iconfont icon" style="color: #c24337;">&#xe891;</span>
							</view>
							<view class="title">
								任务
							</view>
						</navigator>
					</view>
					<view class="fun-item">
					</view>
				</view>
			</view>
		</uni-popup> -->
	</view>
</template>

<script>
	import {getUserProfile} from "@/api/system/user.js"
	export default {
		data() {
			return {
				weekdays: ['日', '一', '二', '三', '四', '五', '六'],
				currentWeekDates: [],
			};
		},
		onLoad() {
			this.getUserInfo();
			this.getCurrentWeekDates();
		},
		computed: {
			yearMonth(){
				let now = new Date();
				return `${now.getFullYear()}年${now.getMonth() + 1}月`;
			}
		},
		methods: {
			getUserInfo(){
				getUserProfile().then((res) => {
					this.userInfo = res.data;
					getApp().globalData.userInfo = res.data;
				})
			},
			//跳转到新建备忘
			toSchedule(){
				uni.navigateTo({
					url:'/pages/index/schedule/note/index'
				})
			},
			//跳转任务或备忘详情
			toDetails(index){
				if(index === 0){
					uni.navigateTo({
						url:'/pages/index/task/details'
					})
				}else{
					uni.navigateTo({
						url:'/pages/index/schedule/note/details'
					})
				}
			},
			//跳转到公告消息页面
			toNotice(){
				uni.navigateTo({
					url:'/pages/index/notice/index'
				})
			},
			//获取当前周日期
			getCurrentWeekDates() {
				let dates = [];
				let now = new Date();
				for (let i = 0; i < 7; i++) {
					let date = new Date(now.getFullYear(), now.getMonth(), now.getDate() - now.getDay() + i);
					dates.push({
						date: date,
						day: date.getDate()
					});
				}
				this.currentWeekDates = dates;
			},
			//获取当前年月
			// getYearMonth(){
			// 	let now = new Date();
			// 	return `${now.getFullYear()}年${now.getMonth()}月`;
			// },
			//判断日期是否为当前日
			isToday(date) {
				let today = new Date();
				return date.date.toDateString() === today.toDateString();
			},
			// 打开新建弹出框
			openCreate(){
				this.$refs.createPopup.open();
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/common/style/customicons.scss";

	.index {
		background-color: #F5F5F5;
		padding: 20rpx 28rpx 0;
		overflow-y: scroll;
		&::-webkit-scrollbar{
			display: none
		}
		.create{
			position: fixed;
			text-align: center;
			bottom: 28rpx;
			left: calc(50% - 12px);
			// left: 0;
			// right: 0;
			z-index: 1;
			.contain{
				@include flex-c-start-center;
				.text{
					text{
						font-size: 24rpx;
						font-weight: 900;
						color: #ababab;
					}
				}
			}
		}
		.layout {
			@include box;
			margin-bottom: 20rpx;
		}
		.schedule{
			.calendar{
				padding: 0 28rpx;
				.year-month{
					color: #9A9A9A;
					font-size: 24rpx;
				}
				.cal-day{
					padding: 10rpx 0;
					.weekdays,.dates{
						display: flex;
						>view{
							flex: 1;
							height: 68rpx;
							@include flex-r-center-center;
							color: #232E3A;
							font-size: 24rpx;
						}
					}
					.current-day{
						.current{
							@include flex-r-center-center;
							width: 40rpx;
							height: 40rpx;
							border-radius: 8rpx;
							background-color: #4095E5;
							font-size: 28rpx;
							color: #fff;
						}
					}
				}
			}
			.schedule-list{
				padding: 0 28rpx 8rpx;
				.item{
					padding: 0 0 6rpx;
					@include flex-r-start-center;
					.tag{
						width: 80rpx;
						height: 40rpx;
						border-radius: 6rpx;
						line-height: 40rpx;
						text-align: center;
						color: #fff;
						font-size: 20rpx;
						background-color: #3BBF03;
					}
					.task{
						background-color: #3388FF;
					}
					.note{
						font-size: 28rpx;
						color: #4095E5;
						padding-left: 16rpx;
						text-decoration: underline;
					}
				}
			}
			.more{
				padding: 6rpx 0;
				display: flex;
				justify-content: center;
				image{
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
		.function{
			.fun-container{
				@include flex-r-wrap;
				// padding: 0 0 30rpx;
				.fun-item{
					width: 25%;
					@include flex-r-center-start;
					.fun-tab{
						@include flex-c-center-center;
						.image{
							width: 90rpx;
							height: 90rpx;
							@include flex-r-center-center;
							border-radius: 20rpx;
							.icon{
								font-size: 44rpx;
							}
						}
						.title{
							padding: 10rpx 0 30rpx;
							font-size: 24rpx;
							color: #232E3A;
						}
					}
				}
			}
		}
		.remind{
			.remind-list{
				padding: 0 44rpx 28rpx;
				@include flex-r-between-center;
				.remind-item{
					@include flex-c-start-center;
					font-size: 24rpx;
					color: #232E3A;
					.remind-num{
						font-size: 28rpx;
					}
					.remind-type{
						line-height: 60rpx;
					}
				}
			}
		}
		.message{
			.all{
				font-size: 24rpx;
				color: #4095E5;
			}
			.message-list{
				padding: 0 28rpx 10rpx;
				.message-item{
					padding: 0 0 20rpx;
					@include flex-r-start-center;
					.line{
						width: 5rpx;
						height: 56rpx;
					}
					.mes{
						background-color: #FFBF6B;
					}
					.not{
						background-color: #93D2F3;
					}
					.content{
						padding-left: 16rpx;
						font-size: 24rpx;
						.time{
							color: #9A9A9A;
							padding: 0 0 4rpx;
						}
						.topic{
							color: #232E3A;
						}
					}
				}
			}
		}
		.create-popup{
			padding: 16rpx 0 120rpx;
			background-color: #fff;
			border-top: 2rpx #bbbbbb solid;
			.title{
				text-align: center;
				color: #999999;
				font-size: 28rpx;
				padding: 0 0 28rpx;
			}
			.fun-container{
				@include flex-r-wrap;
				// padding: 0 0 30rpx;
				.fun-item{
					width: 25%;
					@include flex-r-center-start;
					.fun-tab{
						@include flex-c-center-center;
						.image{
							width: 90rpx;
							height: 90rpx;
							@include flex-r-center-center;
							border-radius: 20rpx;
							.icon{
								font-size: 44rpx;
							}
						}
						.title{
							padding: 10rpx 0 30rpx;
							font-size: 24rpx;
							color: #232E3A;
						}
					}
				}
			}
		}
	}

	::v-deep .uni-section .uni-section-header__decoration {
		background-color: #54BCBD;
	}

	::v-deep .uni-section .uni-section-header__decoration.line {
		width: 6rpx;
		height: 32rpx;
	}
	
</style>